<template>
    <div class="custom-title" :style="customStyle">
        {{ props.title }}
        <slot></slot>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
let props = defineProps(["title", "color", "size", "padding","beforeBgColor"]);
const beforeBgColor = ref(props.beforeBgColor);
const customStyle = {
    color: props.color,
    fontSize: props.size,
    padding: props.padding,
    '--before-bg-color': beforeBgColor.value
}
onMounted(() => {
  beforeBgColor.value = props.beforeBgColor;
});
</script>
<style scoped>
.custom-title {
    display: flex;
    align-items: center;
    font-weight: normal;
    font-stretch: normal;
    font-family: MicrosoftYaHei-Bold;
    font-weight: bold;
}

.custom-title::before {
    content: "";
    display: inline-block;
    height: 20px;
    width: 5px;
    margin-right: 10px;
    background-color: var(--before-bg-color, #1677ff);
    border-radius: 5px;
    vertical-align: middle;
}
</style>